<template>
	<view class="container">
		<qiun-title-bar :title="$props.title" />
		<qiun-data-charts
			:type="$props.type"
			:opts="$props.options"
			:chartData="chartInData"
		/>
	</view>
</template>

<script>
import useStore from '@/store/index';
//下面是演示数据，您的项目不需要引用，数据需要您从服务器自行获取

export default {
	name: 'CustomCharts',
	props: {
		title: {
			type: String,
			default: '图表标题',
		},
		type: {
			type: String,
			default: 'arcbar',
		},
    options: {
			type: Object,
			default: () => {},
		},
		chartData: {
			type: Object,
			default: () => {},
		},
	},
	data() {
		return {
			scrollTop: 0,
      chartInData: {}, // 图表内部数据
		};
	},
	mounted() {
		this.init();
	},
	methods: {
		init() {
			this.setChart();
			console.log('====');
		},
		setChart() {
			setTimeout(() => {
				//因部分数据格式一样，这里不同图表引用同一数据源的话，需要深拷贝一下构造不同的对象
				//开发者需要自行处理服务器返回的数据，应与标准数据格式一致，注意series的data数值应为数字格式
        // 为了确保数据源的更新正常，这里使用props数据源，控制渲染管线
				this.chartInData = this.$props.chartData;
			}, 300);
		},
	},
};
</script>

<style lang="scss" scoped>
.container {
}
</style>
